<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <title>JAVA判题系统</title>
  <link rel="icon" href="<%= context.config.publicPath +'favicon.ico'%>" type="image/x-icon" />
  <!-- <link rel="icon" href="../images/favicon.png" type="image/x-icon" /> -->
</head>
<script>
  /**/
  function setClipboardText(event) {
    // 如果起始dom node的元素名字不是text，则直接终止
    // 不用关注focusNode(复制行为鼠标停留的终止元素)类型，如果不符合text类型值不会显性展示
    if (window.getSelection().anchorNode.nodeName !== '#text') {
      return
    }
    event.preventDefault(); //阻止元素发生默认的行为（例如，当点击提交按钮时阻止对表单的提交）。
    var node = document.createElement('div');
    //对documentfragment不熟，不知道怎么获取里面的内容，用了一个比较笨的方式
    node.appendChild(window.getSelection().getRangeAt(0).cloneContents());
    //getRangeAt(0)返回对基于零的数字索引与传递参数匹配的选择对象中的范围的引用。对于连续选择，参数应为零。
    var htmlData = node.innerHTML;
    var textData = window.getSelection().getRangeAt(0)
    if (event.clipboardData) {
      event.clipboardData.setData("text/html", htmlData);
      //setData(剪贴板格式, 数据) 给剪贴板赋予指定格式的数据。返回 true 表示操作成功。
      event.clipboardData.setData("text/plain", textData);
    } else if (window.clipboardData) { //window.clipboardData的作用是在页面上将需要的东西复制到剪贴板上，提供了对于预定义的剪贴板格式的访问，以便在编辑操作中使用。
      return window.clipboardData.setData("text", textData);
    }
  };
  document.addEventListener('copy', function (e) {
    setClipboardText(e);
  });

</script>

<body>
  <noscript>Out-of-the-box mid-stage front/design solution!</noscript>
  <div id="root">
    <style>
      html,
      body,
      #root {
        height: 100%;
        margin: 0;
        padding: 0;
      }

      /* #root {
          background-image: url('<%= context.config.publicPath +"home_bg.png"%>');
          background-repeat: no-repeat;
          background-size: 100% auto;
        } */

      .page-loading-wrapper {
        display: flex;

        /* flex-direction: column; */
        align-items: center;
        justify-content: center;
        height: 100vh;

        /* min-height: 420px; */
      }

      .ant-spin {
        position: absolute;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        margin: 0;
        margin: 0;
        padding: 0;
        padding: 0;
        color: rgba(0, 0, 0, 0.65);
        color: #1890ff;
        font-size: 0;
        font-variant: tabular-nums;
        line-height: 1.5715;
        text-align: center;
        list-style: none;
        opacity: 0;
        -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
        transition: -webkit-transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
        transition: transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
        transition: transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86),
          -webkit-transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
        -webkit-font-feature-settings: 'tnum';
        font-feature-settings: 'tnum';
      }

      .ant-spin-spinning {
        position: static;
        display: inline-block;
        opacity: 1;
      }

      @keyframes animation-6rlus4 {
        0% {
          -webkit-transform: scaleY(1.0);
          -ms-transform: scaleY(1.0);
          transform: scaleY(1.0);
        }

        50% {
          -webkit-transform: scaleY(0.4);
          -ms-transform: scaleY(0.4);
          transform: scaleY(0.4);
        }

        100% {
          -webkit-transform: scaleY(1.0);
          -ms-transform: scaleY(1.0);
          transform: scaleY(1.0);
        }
      }

      .css-1 {
        display: inline-block;
        width: 2px;
        height: 25px;
        margin: 2px;
        background-color: #296DF3;
        border-radius: 2px;
        -webkit-animation: animation-6rlus4 1s 0.1s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
        animation: animation-6rlus4 1s 0.1s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
      }

      .css-2 {
        display: inline-block;
        width: 2px;
        height: 25px;
        margin: 2px;
        background-color: #296DF3;
        border-radius: 2px;
        -webkit-animation: animation-6rlus4 1s 0.2s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
        animation: animation-6rlus4 1s 0.2s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
      }

      .css-3 {
        display: inline-block;
        width: 2px;
        height: 25px;
        margin: 2px;
        background-color: #296DF3;
        border-radius: 2px;
        -webkit-animation: animation-6rlus4 1s 0.3s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
        animation: animation-6rlus4 1s 0.3s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
      }

      .css-4 {
        display: inline-block;
        width: 2px;
        height: 25px;
        margin: 2px;
        background-color: #296DF3;
        border-radius: 2px;
        -webkit-animation: animation-6rlus4 1s 0.4s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
        animation: animation-6rlus4 1s 0.4s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
      }

      .css-5 {
        display: inline-block;
        width: 2px;
        height: 25px;
        margin: 2px;
        background-color: #296DF3;
        border-radius: 2px;
        -webkit-animation: animation-6rlus4 1s 0.5s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
        animation: animation-6rlus4 1s 0.5s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
      }

    </style>
    <div class="page-loading-wrapper">
      <div class="ant-spin-nested-loading initialLoading">
        <div class="ant-spin ant-spin-spinning">
          <span class="css-0">
            <span class="css-1"></span>
            <span class="css-2"></span>
            <span class="css-3"></span>
            <span class="css-4"></span>
            <span class="css-5"></span>
          </span>
        </div>
      </div>
    </div>
  </div>
</body>

</html>
